<template>
  <swiper :options="swiperOption" class="banner">
    <!-- slides -->
    <swiper-slide class="cd">
      <div class="cd-wrapper" ref="cdWrapper">
        <img :src="currentSongs.picUrl" alt />
      </div>
      <!-- 第一句歌词 -->
      <p>{{getFirstLyric()}}</p>
    </swiper-slide>
    <swiper-slide class="lyric" ref="lyric">
      <scrollView ref="scrollView">
        <!-- 列表歌词 -->
        <ul>
          <li
            v-for="(i,index) in currentLyric"
            :key="index"
            :class="{'active':currentLineNum===index}"
          >{{i}}</li>
        </ul>
      </scrollView>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import scrollView from '@/components/scrollView'
// 导入vuex辅助函数
import { mapGetters } from 'vuex'
export default {
  components: { scrollView, Swiper, SwiperSlide },
  props: {
    swiperArr: {
      type: Array,
      default: () => [],
      require: true
    },
    currentTime: {
      type: Number,
      default: 0,
      require: true
    }
  },
  data () {
    return {
      swiperOption: {
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      },
      currentLineNum: '0' // 歌词高亮的shi'j
    }
  },
  methods: {
    // 获取第一句歌词
    getFirstLyric () {
      for (const key in this.currentLyric) {
        return this.currentLyric[key]
      }
    }
  },
  computed: {
    ...mapGetters(['isPlaying', 'currentSongs', 'currentLyric'])
  },
  watch: {
    isPlaying (newValue, oldValue) {
      if (newValue) {
        this.$refs.cdWrapper.classList.add('active')
      } else {
        this.$refs.cdWrapper.classList.remove('active')
      }
    },
    currentTime (newValue, oldValue) {
      // 进度条时间
      const lineNum = Math.floor(newValue) + ''
      // 歌词时间
      const res = this.currentLyric[lineNum]
      // 如果当前歌曲歌词时间是undefined且是空的时候 保持当前这句高亮 不是才赋予时间
      if (res !== undefined && res !== '') {
        this.currentLineNum = lineNum
        // 2.歌词滚动同步
        // currentLyricTop 滚动歌词距离顶部的距离
        const currentLyricTop = document.querySelector('li.active').offsetTop
        // $el 获取组件对象  lyricHeight歌词高度
        const lyricHeight = this.$refs.lyric.$el.offsetHeight
        // 如果高亮歌词大于 歌词高度的一半开始滚动
        if (currentLyricTop > lyricHeight / 2) {
          this.$refs.scrollView.scrollTo(0, lyricHeight / 2 - currentLyricTop, 100)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable.scss";
@import "@/assets/css/mixin.scss";
@keyframes sport {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.banner {
  position: fixed;
  top: 150px;
  bottom: 250px;
  left: 0;
  right: 0;
  .cd {
    .cd-wrapper {
      display: block;
      margin: 0 auto;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      border: 30px solid #fff;
      overflow: hidden;
      animation: sport 3s linear infinite;
      animation-play-state: paused;
      &.active {
        animation-play-state: running;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      text-align: center;
      @include font_size($font_medium);
      @include font_color();
      margin-top: 50px;
    }
  }
  .lyric {
    li {
      text-align: center;
      @include font_size($font_medium);
      @include font_color();
      margin: 10px 0;
      &:last-of-type {
        padding-bottom: 50%;
      }
      &.active {
        color: #fff;
      }
    }
  }
}
</style>
<style lang="scss">
@import "@/assets/css/mixin.scss";
/deep/.my-bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  margin: 0 20px;
}
.my-bullet-active {
  width: 60px;
  @include bg_color();
}
</style>
